import React from 'react'
import './index.css'
export default function Modal(props) {
 console.log('函数组件渲染了')
  let defaultProps = {
      bg:'rgba(0,0,0,.5)',
      opacity:0.5
  }
  console.log(props)
  const datas = {...defaultProps,...props} // 
  // const datas = Object.assign({},defaultProps,props) 
  console.log(datas)
  return (
    
    <div
    onClick={
      (e)=>{
        // 1
        console.log(e.target.className)
        if(e.target.className === 'modal modal-center'){
          datas.onClose()
        }
        
        console.log(e)
        // e.stopPropagation()
      }
    }
    className='modal modal-center'
    style={{
      background: datas.bg,
      opacity: datas.opacity,
    }}
    >
      {datas.children}


    </div>
  )
}
